import classNames from "classnames";
import Count from "../Count";
import "./index.scss";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useState } from "react";
import { clearCart } from "../../store/modules/takeaway";

const Cart = () => {
  const dispatch = useDispatch();
  // 获取仓库中购物车列表的数据
  const { cartList } = useSelector((state) => state.foods);
  // 购物车中商品数量
  const [count, setCount] = useState(0);
  // 购物车中商品总价
  const [totalPrice, setTotalPrice] = useState(0.0);
  // 当购物车中商品发生变化时计算当前购物车中商品数量和总价
  useEffect(() => {
    setCount(cartList.reduce((pre, cur) => pre + cur.count, 0));
    setTotalPrice(
      cartList.reduce((pre, cur) => pre + cur.price * cur.count, 0.0)
    );
  }, [cartList]);
  // 控制购物车面板的显示和隐藏
  const [showPanel, setShowPanel] = useState(false);
  return (
    <div className="cartContainer">
      {/* 遮罩层 添加visible类名可以显示出来 */}
      <div
        className={classNames("cartOverlay", { visible: showPanel })}
        onClick={() => setShowPanel(false)}
      />
      {/* 底部购物车导航栏 */}
      <div
        className="cart"
        onClick={() => cartList.length > 0 && setShowPanel(true)}
      >
        {/* fill 添加fill类名可以切换购物车状态*/}
        {/* 购物车数量 */}
        <div className={classNames("icon", { fill: count })}>
          {count > 0 && <div className="cartCornerMark">{count}</div>}
        </div>
        {/* 购物车价格 */}
        <div className="main">
          <div className="price">
            <span className="payableAmount">
              <span className="payableAmountUnit">¥</span>
              {totalPrice.toFixed(2)}
            </span>
          </div>
          <span className="text">预估另需配送费 ¥5</span>
        </div>
        {/* 结算 or 起送 */}
        {count ? (
          <div className="goToPreview">去结算</div>
        ) : (
          <div className="minFee">¥20起送</div>
        )}
      </div>
      {/* 添加visible类名 div会显示出来 */}
      <div className={classNames("cartPanel", { visible: showPanel })}>
        <div className="header">
          <span className="text">购物车</span>
          <span className="clearCart" onClick={() => dispatch(clearCart())}>
            清空购物车
          </span>
        </div>
        {/* 购物车列表 */}
        <div className="scrollArea">
          {cartList.map((item) => {
            return (
              <div className="cartItem" key={item.id}>
                <img className="shopPic" src={item.picture} alt="" />
                <div className="main">
                  <div className="skuInfo">
                    <div className="name">{item.name}</div>
                  </div>
                  <div className="payableAmount">
                    <span className="yuan">¥</span>
                    <span className="price">{item.price}</span>
                  </div>
                </div>
                <div className="skuBtnWrapper btnGroup">
                  <Count food={item} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Cart;
